<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西邮青年</title>
    <link rel="shortcut icon" href="../../images/favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css">
    <link rel="stylesheet" href="../../styles/login.css">
    <link rel="stylesheet" href="../../styles/bttn.min.css">
    <link rel="stylesheet" href="../../styles/icon/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../styles/input/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../../styles/input/fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../styles/input/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="../../styles/input/css/component.css"/>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../../styles/htmleaf-demo.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../../styles/input-style.css">
    <style>
        .body {
            min-width: 1366px;
        }
    </style>
</head>

<body>
<div class="login" id="login-app">
    <div class="login-box">
        <img src="../../images/login/cover.webp" alt="">
        <div class="login-form">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="100px"
                     style="width: 500px;height: 500px">
                <div class="login-form-title" style="margin-left: 20px">
                    <img src="../../images/login/logo.png" style="width:562.5px;height:100px;" alt=""/>
                </div>
                <el-form-item prop="volunteerStunum">
                    <div class="col-3 input-effect" style="width: 400px">
                        <input class="effect-16" v-model="loginForm.volunteerStunum" type="text" placeholder="用户名" style="font-size: 30px"/>
                        <span class="focus-border"></span>
                    </div>
                </el-form-item>
                <el-form-item prop="volunteerPass">
                    <div class="col-3 input-effect" style="width: 400px">
                        <input type="text" v-model="loginForm.volunteerPass" class="effect-17" placeholder="密码" style="font-size: 30px"/>
                        <span class="focus-border"></span>
                    </div>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button :loading="loading"
                               round
                               size="medium" type="primary"
                               style="width:100%;height: 50px;background-color: #002f63 !important;"
                               @click.native.prevent="handleLogin">
                        <span v-if="!loading" style="font-size: 20px;color: white;font-family: '微软雅黑 Light';font-weight: bolder">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/volunteer.js"></script>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                loginForm: {
                    volunteerStunum: '',
                    volunteerPass: ''
                },
                loading: false
            }
        },
        computed: {
            loginRules() {
                const validateStuNum = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入密码'))
                    } else {
                        callback()
                    }
                }
                return {
                    volunteerStunum: [{'validator': validateStuNum, 'trigger': 'blur'}],
                    volunteerPass: [{'validator': validatePassword, 'trigger': 'blur'}]
                }
            }
        },
        created() {
        },
        methods: {
            async handleLogin() {
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        let res = await loginApi(this.loginForm)
                        if (String(res.code) === '1') {
                            localStorage.setItem('adminInfo', JSON.stringify(res.data))
                            window.location.href = '../back/indexBackend.html'
                        } else {
                            this.$message.error(res.msg)
                            this.loading = false
                        }
                    }
                })
            }
        }
    })
</script>
<script src="../../input/js/classie.js"></script>
<script>
    // JavaScript for label effects only
    $(window).load(function(){
        $(".col-3 input").val("");

        $(".input-effect input").focusout(function(){
            if($(this).val() != ""){
                $(this).addClass("has-content");
            }else{
                $(this).removeClass("has-content");
            }
        })
    });
</script>

</body>

</html>
